<!DOCTYPE html>
<%@page contentType="text/html;charset=UTF-8"%>
<%@page pageEncoding="UTF-8"%>


<%@ include file="/WEB-INF/include.jsp"%>
<html>
<head>
<META http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="pragma" content="nocache">
<meta http-equiv="expires" content="Thu, 1 October 1998 00:00:00 PST">
<title>Welcome</title>

<link rel="stylesheet" href="../css/config.css" type="text/css"></link>

<script type="text/javascript" src="../js/jquery.js"></script>

<script type="text/javascript"
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">
</script>
<script language="JavaScript">
	function point_it(event){
	    pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("pointer_div").offsetLeft;
	    pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("pointer_div").offsetTop;
	    document.classifficatonForm.form_x.value = pos_x;
	    document.classifficatonForm.form_y.value = pos_y;
/* 	    document.classifficatonForm.idImage.src="";
	    document.classifficatonForm.action ="objectclassificationchange"; */
		document.classifficatonForm.submit();
	}
	
	function double_point_it(event){
	    pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("pointer_div").offsetLeft;
	    pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("pointer_div").offsetTop;
	    document.classifficatonForm.form_x.value = pos_x;
	    document.classifficatonForm.form_y.value = pos_y;
/* 	    document.classifficatonForm.idImage.src="";
	    document.classifficatonForm.action ="getinfoobject"; */
		document.classifficatonForm.submit();
	}
	

</script>
<script type="text/javascript">
	$(document).ready(
			function() {
				$("img").mousemove(
						function(e) {
							$('#position').html(
									"(INFO)  X:"
											+ (e.pageX - Math.floor($("img")
													.offset().left))
											+ " - Y:"
											+ (e.pageY - Math.floor($("img")
													.offset().top)));
							$("img").hover(function() {
								$("#position").show();
							}, function() {
								$("#position").hide();
							});
						});
			});
	

</script>
</head>
<body>
	<jsp:include page="/WEB-INF/views/menu.jsp" />
	<br>
	<br>
	<form  name="classifficatonForm" method="post">
		<table>
			<tr>
				<td>
				
				
					
				</td>
				<td>
					<%
						if (session.getAttribute("uploadFile") != null
								&& !(session.getAttribute("uploadFile")).equals("")) {
					%> 
						<br> <br>
						<div style="height: 800px; width: 800px; overflow: scroll;"
							id="pointer_div" onclick="point_it(event)" ondblclick="double_point_it(event)">
							<img id="idImage" src="<%=session.getAttribute("uploadFile")%>"
								alt="Imagen a clasificar <%=session.getAttribute("uploadFile")%> " />
						</div>
						 X: <input type="text" name="form_x" size="4" /> - Y: <input
						type="text" name="form_y" size="4" /> 
					<%
						}
					%> 
					<br> <br>
					<div id="position"></div>
				</td>
			</tr>
		</table>
	</form>
</body>
</html>